<template>
	<view class="details">
		<view class="navbar">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="navbarh acea-row row-bottom">
				<view class="acea-row row-middle"> 
					<view class="iconfont icon-jiantou-zuo2" @click.stop="back"></view>
					<view class="title">住房公积金账户详情</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 180rpx;"></view>
		
		<view class="content">
			<view class="top acea-row row-middle">
				<view class="liness"></view>
				<view style="margin-left: 20rpx;">个人信息</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">姓名</view>
				<view>{{ userdata.real_name }}</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">手机号码</view>
				<view>{{ userdata.phone }}</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人账户</view>
				<view>{{ userdata.card_id }}</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人账户状态</view>
				<view>正常</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人账户余额</view>
				<view>{{ userdata.yue }}</view>
			</view>
		</view>
		
		<view class="content">
			<view class="top acea-row row-middle">
				<view class="liness"></view>
				<view style="margin-left: 20rpx;">中心信息</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">中心编号</view>
				<view>{{ userdata.zongxin_bianhao }}</view>
			</view>
			
			
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx; align-items:inherit;">
				<view style="color: #797979;font-size: 30rpx;">中心名称</view>
				
				<view style="max-width: 485rpx;line-height: 60rpx;position: relative;top: -8rpx;" >
					<view v-if="userdata.is_zongxin_c == 1">{{ userdata.zongxin_name }}</view>
					<view v-else="userdata.is_zongxin_c == 0">{{ userdata.zongxin_name }}</view>
				<!-- </br> -->
				<!-- {{ userdata.zongxin_name1 }} -->
				</view>
			</view>
			
			
			
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx; align-items:inherit;">
				<view style="color: #797979;font-size: 30rpx;">单位名称</view>
				
				<view style="max-width: 485rpx;line-height: 60rpx;position: relative;top: -8rpx;" >
					<view v-if="userdata.is_danwei_c == 1">{{ userdata.danwei_name }}</view>
					<view v-else="userdata.is_danwei_c == 0">{{ userdata.danwei_name }}</view>
				<!-- </br> -->
				<!-- {{ userdata.zongxin_name1 }} -->
				</view>
			</view>
			
			
			
			<!-- <view class="acea-row; row-between-wrapper text" style="font-size: 32rpx; align-items:inherit;">
				<view style="color: #797979;font-size: 30rpx;">单位名称</view>
				<view style="width: 256px;line-height: 60rpx;position: relative;top: -8rpx;" >
					<view style=" text-align: right;">{{ userdata.danwei_name }}</view>
				</br>
				{{ userdata.danwei_name1 }}
				</view>
			</view> -->
			
			
			<!-- <view class="acea-row; row-between-wrapper text" style="font-size: 32rpx; align-items:inherit;">
				<view style="color: #797979;font-size: 30rpx;">单位名称</view>
				<view  style="width: 492rpx;line-height: 60rpx;position: relative;top: -8rpx;">
				{{ userdata.danwei_name }}
				</view>
			</view> -->
			
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">单位账号</view>
				<view>{{ userdata.danwei_zhanghao }}</view>
			</view>
		</view>
		
		<view class="content">
			<view class="top acea-row row-middle">
				<view class="liness"></view>
				<view style="margin-left: 20rpx;">账户信息</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人缴存比列</view>
				<view>{{ userdata.geren_bili }}%</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">单位缴存比例</view>
				<view>{{ userdata.danwei_bili }}%</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人缴存基数</view>
				<view>{{ userdata.geren_jishu }}</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">个人月缴存额</view>
				<view>{{ userdata.geren_yuejiao }}</view>
			</view>
			<view class="acea-row; row-between-wrapper text" style="font-size: 32rpx;">
				<view style="color: #797979;font-size: 30rpx;">单位月缴存额</view>
				<view>{{ userdata.danwei_yuejiao }}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import{
		userData
	} from '@/api/user.js'
	export default {
		data() {
			return {
				sysHeight : sysHeight,
				userdata: [],
				
			};
		},
		onShow() {
			this.getdata();
		},
		methods:{
			getdata(){
				userData().then(res=>{
					this.userdata = res.data.userData;
				})
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details{
		
		.navbar{
			width: 100%;
			height: 180rpx;
			background-image: url('https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/navbar-bg.png');
			background-size: 100% 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			
			.navbarh{
				width: 100%;
				height: 88rpx;
				padding: 0 30rpx 0 30rpx;
				
				
				.icon-jiantou-zuo2{
					color: #fff;
					font-size: 40rpx;
				}
				.title{
					font-size: 36rpx;
					color: #fff;
					margin-left: 20rpx;
				}
			}
		}
		
		.content{
			padding: 0 30rpx 30rpx 30rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			
			.top{
				border-bottom: 1rpx solid #e1e1e1;
				color: #3D63D7;
				padding: 30rpx 0;
				font-size: 32rpx;
				
				.liness{
					width: 8rpx;
					height: 30rpx;
					background-image: linear-gradient(to bottom,#3F65D8,#557AE3,#7395F0);
				}
			}
			.text{
				margin-top: 25rpx;
				color: #333;
			}
			

		}
		
		
		
	}
</style>
